<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import FakeEventSource from '@/utils/FakeEventSource.js'
interface Tabs {
  index: number
  title: string
}
const tabsReview: Tabs[] = [
  {
    index: 0,
    title: '2022年极客大赛'
  },
  {
    index: 1,
    title: '2021年极客大赛'
  },
  {
    index: 2,
    title: '2020年极客大赛'
  },
  {
    index: 3,
    title: '2019年极客大赛'
  }
]

const activeIndex = ref(0)

const setCurrentIndex = (index: number) => {
  console.log('index', index)
  activeIndex.value = index
}
const imgUrlArr = [
  {
    index: 0,
    row: [
      {
        index: 0,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 1,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 2,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      }
    ]
  },
  {
    index: 1,
    row: [
      {
        index: 0,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 1,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 2,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      }
    ]
  },
  {
    index: 2,
    row: [
      {
        index: 0,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 1,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 2,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      }
    ]
  },
  {
    index: 2,
    row: [
      {
        index: 0,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 1,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      },
      {
        index: 3,
        url: [
          {
            index: 0,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 1,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            index: 2,
            src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        ]
      }
    ]
  }
]
const isAnswer = ref(false)
const inputText = ref('')
const doubleClick = ref(false)
const input = () => {
  console.log(inputText.value)
}
const answerText = ref('')
const answerId = ref('')
const container = ref(null)

const isCursorVisable = ref(false)
//会话数组
interface chatArrayType {
  time?: string
  text?: string
  answerId?: number | string
  isQuery?: boolean
  isDivider?: boolean
  uuid?: string
  streamReadyState?: Number | undefined
}
const chatArray = ref<chatArrayType[]>([
  {
    time: '2024-04-11',
    text: 'hello',
    isQuery: true,
    uuid: '77888555',
    streamReadyState: 0
  },
  {
    time: '2024-04-11',
    text: '你好',
    answerId: 1,
    isQuery: false,
    uuid: '77888555'
    // streamReadyState: 1
  }
])
const lastAnswerId = ref<number | string>()
const isLoading = ref(false)
const handleClick = () => {
  console.log('发送')
  //节流阀禁止双击事件
  if (doubleClick.value) {
    return
  }
  doubleClick.value = true
  setTimeout(() => {
    doubleClick.value = false
  }, 500)

  if (!inputText.value) {
    ElMessage({
      message: '输入内容不能为空',
      type: 'warning'
    })
    return
  } else {
    chatArray.value.push({
      time: '2024-04-11',
      text: inputText.value,
      // answerId: '1',
      isQuery: true,
      uuid: '77888555',
      streamReadyState: 0
    })
    inputText.value = ''
    getStream()
    // console.log('res', res)
  }
}
const source = new FakeEventSource('http://your-mock-server.com/events')
const getStream = () => {
  // let data
  let index = 0
  source.addEventListener('message', (e: any) => {
    if (e && e.detail && e.detail.data) {
      try {
        const msgData = JSON.parse(e.detail.data)
        console.log('message', msgData) // 输出 JSON 数据
      } catch (error) {
        console.error('Error parsing JSON data:', error)
      }
    } else {
      if (e !== undefined) {
        index++
        console.log('dataUUid', JSON.parse(e.data))
        const data = JSON.parse(e.data)
        answerId.value = data.answerId
        isAnswer.value = true
        if (index > 1) {
          upDateAnswerText(data.answerId, data.msg)
        } else {
          chatArray.value.push({
            time: '2024-04-11',
            text: '',
            answerId: answerId.value,
            isQuery: false,
            uuid: '77888555'
          })
        }
        if (data[0] === 'DONE') {
          isAnswer.value = false
        }
      }
    }
  })

  // debugger
  // return data
}

const upDateAnswerText = (answerId: number, answerValue: string) => {
  chatArray.value.forEach((item) => {
    if (item.answerId && item.answerId === answerId) {
      // debugger
      item.text = answerValue
    }
  })
}
// 当不再需要监听时，应该停止模拟
// 例如，在组件卸载或页面关闭时
// 假设在某个时刻你决定停止接收消息
// source.stopMocking()

const handleContentChange = () => {
  const containerValue: any = container.value
  if (containerValue) {
    // debugger
    containerValue.scrollTop = containerValue.scrollHeight
  }
}

const handleStop = () => {
  source.stopMocking()
}
onMounted(() => {
  const containerValue: any = container.value
  // debugger
  if (containerValue) {
    containerValue.addEventListener('DOMSubtreeModified', handleContentChange)
  }
})
</script>

<template>
  <div class="home-main-page">
    <div class="title">
      <h4>QA</h4>
      <span></span>
      <h2>问答</h2>
      <el-card class="box-card">
        <div class="content" ref="container">
          <div
            :class="item.isQuery ? 'user' : 'ai'"
            v-for="(item, index) in chatArray"
            :key="index"
          >
            <div
              :class="item.isQuery ? 'user-content' : 'ai-content'"
              v-if="!item.isDivider"
            >
              <span class="data-time">{{ item.time }}</span>
              <span
                id="text"
                ref="textElement"
                :style="item.isQuery ? 'background-color:rgb(62,121,255);' : ''"
                >{{ item.text }}

                <span
                  class="blink"
                  v-if="isCursorVisable && item.answerId == lastAnswerId"
                  >&#x2588;</span
                ></span
              >
              <span
                class="blink"
                v-if="isLoading && item.answerId == lastAnswerId"
                >&#x2588;</span
              >
              <span class="avatar">
                <i
                  :class="
                    item.isQuery ? 'iconfont icon-yonghu' : 'iconfont icon-qa'
                  "
                  :style="{ fontSize: '24px', color: 'rgb(128,204,186)' }"
                ></i>
              </span>
            </div>
          </div>
        </div>
        <el-input
          class="queryInput"
          placeholder="请随意提问..."
          v-model.trim="inputText"
          @input="input"
          @keyup.enter="handleClick"
        >
          <template #suffix>
            <el-icon
              v-if="isAnswer"
              class="iconfont icon-tingzhi"
              :style="{ fontSize: '35px', color: 'red' }"
              @click="handleStop"
            >
            </el-icon>
            <el-icon
              v-else
              class="iconfont icon-fasong"
              :style="{ fontSize: '30px', color: '#1296db' }"
              @click="handleClick"
            >
            </el-icon>
          </template>
        </el-input>
      </el-card>
    </div>
    <div class="title">
      <h4>COMPETITION HISTORY</h4>
      <span></span>
      <h2>赛事回顾</h2>
    </div>
    <div class="tabs">
      <ul>
        <li
          v-for="(item, index) in tabsReview"
          :key="index"
          @click="setCurrentIndex(index)"
          :class="{ 'active-tab': activeIndex === index }"
        >
          {{ item.title }}
          <span></span>
        </li>
      </ul>
    </div>
    <div class="img">
      <el-carousel
        trigger="click"
        height="auto"
        indicator-position="outside"
        arrow="never"
      >
        <el-carousel-item
          v-for="(item, index) in imgUrlArr"
          :key="index"
          style="height: 600px"
        >
          <div class="mery-go-round">
            <div class="layout">
              <el-row :gutter="1" v-for="(row, index) in item.row" :key="index">
                <el-col :span="8" v-for="(url, index) in row.url" :key="index"
                  ><div class="grid-content ep-bg-purple" />
                  <el-image
                    style="width: 350px; height: 200px"
                    :src="url.src"
                    fit="fill"
                /></el-col>
              </el-row>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box-card {
  position: relative;
  width: 1050px;
  height: 800px;
  margin-top: 20px;
  .content {
    height: 650px;
    overflow: auto;
  }
  .queryInput {
    position: absolute;
    width: 80%;
    height: 50px;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    ::v-deep() {
      .el-input__wrapper {
        // border-radius: 10px;
        &.is-focus {
          box-shadow: 0 0 0 1px rgb(75, 114, 209) inset;
        }
      }
    }
  }
  .iconfont {
    &:hover {
      cursor: pointer;
    }
  }
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  &:first-child {
    margin-top: 20px;
  }
  h4 {
    color: rgb(208, 209, 224);
    margin: 5px 0;
  }
  h2 {
    margin: 10px 0;
  }
  & > span {
    &::after {
      content: '';
      display: block;
      width: 60px;
      height: 5px;
      background-color: rgb(75, 114, 209);
    }
  }
}
.tabs {
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    li {
      position: relative;
      margin: 0 30px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.active-tab {
  color: rgb(75, 114, 209);
  font-weight: bold;
  span {
    &::after {
      position: absolute;
      top: 25px;
      left: -20px;
      content: '';
      display: block;
      width: 160px;
      height: 3px;
      background-color: rgb(75, 114, 209);
    }
  }
}
.img {
  width: 100%;
  margin-top: 50px;
  // background-color: pink;
  .el-row {
    margin-bottom: -3px;
    &:first-child {
      margin-bottom: -4px;
    }
  }
}

::v-deep() {
  .el-carousel {
    .mery-go-round {
      display: flex;
      justify-content: center;
    }
    .el-carousel__button {
      background-color: rgb(75, 114, 209) !important;
      height: 4px;
    }
  }
}
.user {
  padding-right: 50px;
  margin-top: 50px;
  .user-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    .date-time {
      color: #b5b3b3;
      font-size: 14px;
    }
    .avatar {
      width: 34px;
      height: 36px;
      position: absolute;
      top: 0;
      right: -50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  #text {
    white-space: pre-wrap;
    line-height: 30px;
    overflow: hidden;
    font-size: 16px;
    padding: 10px;
    background-color: rgb(210, 249, 209);
    color: #ffffff;
    border-radius: 24px 8px 24px 24px;
  }
}

.ai {
  padding-left: 50px;
  margin-top: 50px;
  .ai-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    .date-time {
      color: #b5b3b3;
      font-size: 14px;
    }
    .avatar {
      width: 34px;
      height: 36px;
      position: absolute;
      top: 0;
      left: -50px;
      img {
        width: 100%;
        height: 100%;
      }
      &:last-child {
        margin-bottom: 10px;
      }
    }
  }
  #text {
    white-space: pre-wrap;
    max-width: 800px;
    line-height: 30px;
    overflow: hidden;
    font-size: 16px;
    padding: 10px;
    background-color: rgb(210, 249, 209);
    color: #515459;
    border-radius: 24px 8px 24px 24px;
    .blink {
      animation: blink-animation 0.5s step-end infinite;
    }
    @keyframes blink-animation {
      from,
      to {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
  }
}
</style>
